// 全局变量
@import './variables.scss';
// ele样式覆盖
@import './element-ui.scss';
// 顶部右侧显示
@import './top.scss';
// 导航标签
@import './tags.scss';
// 工具类函数
@import './mixin.scss';
// 侧面导航栏
@import './sidebar.scss';
// 动画
@import './animate/vue-transition.scss';
//主题
@import './theme/index.scss';
//适配
@import './media.scss';
//通用配置
@import './normalize.scss';
//领导端
@import './leader.scss';

a {
  text-decoration: none;
  color: #333;
}

* {
  outline: none;
}

// 关于 图标 CSS 的设置
[class^="icon-"] {
  font-family: "iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 24px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.avue-input-icon__item i, .avue-crud__icon--small {
  font-family: "iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 24px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-menu-item [class^=icon-] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 24px !important;
  vertical-align: middle;
}

.el-submenu [class^=icon-] {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 24px !important;
}
.mg-t20{
  margin-top: 20px;
}
.mg-t40{
   margin-top: 40px;
 }
.mg-b20{
  margin-bottom: 20px;
}
.mg-0-5{
  margin:0 5px;
}
.mg-0-10{
  margin:0 10px;
}
.mg-l10{
  margin-left: 10px;
}
.mg-l15{
  margin-left: 15px;
}
.mg-r10{
  margin-right: 10px;
}
.mg-r15{
  margin-right: 15px;
}
.mg-10-0{
  margin: 10px 0;
}
.pd10{
  padding: 10px;
}
.text-center{
  text-align: center;
}
.pull-right{
  float: right;
}
.text-left{
  text-align: left;
}
.table-header-btn-box{
  height: 50px;
  border-bottom: 1px solid #b0bde2
}
.cursor-pointer{
  cursor: pointer;
}
.border-bottom-theme{
  border-bottom: 1px solid #b0bde2
}
.border-top-theme{
  border-top: 1px solid #b0bde2
}
.table-header-table-box table{
  width: 100%;
}
.table-header-table-box table tr,
.table-header-table-box table tr td{
  border: solid 1px grey;
  padding:10px 2px;
  text-align: center;
  width: 1%;
}
.pd-b20{
  padding-bottom: 20px;
}
.fontDa .el-textarea__inner{
  font-size: 22px;
}


.margin-tb-20{
  margin: 20px 0;
}
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.newline{
  white-space:pre-line!important;
  font-size: 20px!important;
}
//强制更改tooltip样式
.el-tooltip__popper{
  white-space: pre-line;
}

//奖金测算（新模块）
.bonus {
  height: 100%;
  overflow: hidden;
  .sub-title{
    font-size: 20px;
    font-weight: bold;
    display: flex;
    .content{
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 2px solid #0e258c;
      span:first-child{
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .search-form{
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(176, 189, 226);
    margin-bottom: 10px;
    .el-form{
      display: flex;
      .el-form-item{
        margin-bottom: 0;
      }

    }
  }


  .el-table{
    .el-button.el-button--text{
      padding: 0;
    }
    .rowNavigation{
      cursor: pointer; //鼠标划过，显示小手和指示按钮
      .nav{display: none;}
      &:hover,{
        background: #ecf5ff;
        .nav{display: inline-block;color: #0a66c2;position: absolute;right: 0}
      }
      &.current-row{
        .nav{display: inline-block;color: #0a66c2;position: absolute;right: 0}
      }
    }

    //可展开表格
    .el-table__expanded-cell{ //表格下一级表格
      .el-table{
        width: 95%;
        margin: 0 auto ;
        th{
           background:  #F2F3F5!important;
           padding: 4px 0!important;
           font-size: 15px;
        }
      }
    }

    .rowSpan3{//单元格拆分成3行2列（eg:奖金测算 -> 人员测算配置）
      padding: 0!important;
      .cell{
        padding: 0px;
      }
      .inner-row{
        width: 100%;
        .col{
          display: flex;
          height: 30px;
          align-items: center;
          border-bottom: 1px solid #ebeef5;
          &:last-child{
            border-bottom: none;
          }
          span{
            width: 50%;
            height: 100%;
            border-right: 1px solid #ebeef5;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            &:last-child{
              border-right: none;
            }
          }

        }
      }
    }

     //可编辑的表格
     &.edit-table{
       .el-table__row{
         td{padding: 0!important;}
         .cell{padding: 0 }
         //.cell{padding: 0 0 15px 0} //将表单验证提示语显示出来
       }
       .el-form-item--small.el-form-item{
         margin-bottom: 0 ;
         .el-input-number{
           width: 100%;
         }
       }
       .el-form-item__error{
       }
     }

    //奖金池的统计
     &.count{
       .lastCell{ //最后一列合计
         font-weight: bold;
       }

       .el-table__footer-wrapper{
         .has-gutter{
           td{font-weight: bold;color: #303745}  //最后一行合计
           .gutter{
             background: #f5f7fa!important; //合计列，滚动条位置（最后一个格）
           }
         }
       }
       //奖金池第三个table
       .countRow{
          td{background: #f5f7fa;font-weight: bold;}
       }
     }

  }

  .el-dialog{
    .el-form{
      display: flex;
      flex-wrap: wrap;

      &.col-12{
        .el-form-item{width: 50%}
      }

      .form-item-col-3{
         .col-3{
           span{
             display: inline-block;
             width: 70px;
             text-align: center;
           }
           display: flex;
           width: 33%;
           float: left;
         }
        .el-input-number.is-without-controls .el-input__inner{padding: 0 8px}
      }
    }
  }

  //如果弹框内 内容较多，固定弹框高度（不超出屏幕，否则弹框外会出现滚动条），实现弹框不动，内部可滚动效果
  &.fix-height{
    .el-dialog {
      .el-dialog__body{
        height: 75vh;
      }
    }

    &.v50h{
      .el-dialog {
        .el-dialog__body{
          height: 50vh;
        }
      }
    }
  }

   //日期控件
  .el-date-editor{
    line-height: 35px;
    height: 35px;
    .el-range-separator{width: 20px;line-height: 27px}
    &.el-date-editor--daterange.el-input__inner{
      width: 100%;
    }
    .el-range-input{font-size: 16px}
  }

  .el-input{
    &.is-disabled .el-input__inner{
      color: #959595;
    }
  }

  .el-select{
    .el-select-dropdown__item{
      padding: 0 20px!important;
    }
  }


  .flex{display: flex;}
  .flex-right{display: flex;align-items: center;justify-content: flex-end}
  .flex-l-r{
    display: flex;align-items: center;justify-content: space-between;
    .l-box{
      width: calc(100% - 400px);
      display: flex;
      align-items: center;
      .item{display: flex;align-items: center;
        .txt-bold{line-height: 30px}
      }
     }
    &.flex-start{
      align-items: flex-start;
    }
  }
  .w100{width: 100%!important;}
  .w200{width: 200px}
  .w215{width: 215px}
  .w125{width:125px}
  .w90{width: 90px}
  .boxBtnW{width: 230px}
  .body-height{height: 100vh;}
  .txt-right{text-align: right}
  .text-left{
    text-align: left ;
    .el-input{
      input{text-align: left}
    }
  }
  .txt-bold {font-weight: bold;}
  .txt-amount{display: inline-block;padding: 0 5px;width: 120px;text-align: left}
  .txt-amount.long{width: 350px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-right: 15px;line-height: 30px}
  .txt-ellipse{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;}
  .align-right{text-align: right}
  .line-h-20{line-height: 20px}
  .mb-20{margin-bottom: 20px}
  .mt-80{margin-top: 80px}
  .pd-l-15{padding-left: 15px}
  .pd-t-10{padding-top: 10px}
  .table-tile{font-size: 18px;font-weight: bold;text-align: center;height: 40px;line-height: 40px}
  .table-tile.hover{cursor: pointer}
  .group-title{font-size: 16px;font-weight: bold;padding-bottom: 20px}
  .divide{width: 100%;height: 1px;background: rgb(176, 189, 226);;margin-bottom: 20px}
  .menu-left{margin-bottom: 10px;}
  .flexible-box{
    position: absolute;
    top: 50%;
    margin-top: -9px;
    left:calc(100% - 20px) ;
    background-color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 0 6px rgba(0,0,0,.12);
    cursor: pointer;
    z-index: 5;
  }
  .flexible-box:hover{
    background-color: #F2F6FC;
  }
  .delete_btn{color: #b6202b}
  .red{
    color: #b6202b ;
    .el-input__inner{ color: #b6202b !important;font-weight: bold}
  }
  .green{
     color: #67C23A ;
     .el-input__inner{ color: #67C23A !important;font-weight: bold}
   }

   &.el-popover{ //eg:测算方案-测算方案审核-点标题出现的详情
     height: auto;
    .echart-box{
      display: flex!important;
      .item{
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        &:last-child::after{
          content: '';
          height: 100%;
          width: 1px;
          border-left: 1px dashed #000;
          position: absolute;
          right: calc(100% - 10px);
          top: 0;
          z-index: 9999;
          box-sizing: border-box;
        }
        ul{
          list-style: none;
          padding: 0 10px 0 20px;
          box-sizing: border-box;
          margin:0;
          font-size: 14px;

        }
        .bt-title{text-align: center;font-size: 14px;font-weight: bold;padding: 10px 0 0 0 }
      }
    }
  }

}


